<template>
	<div class="personAllBg">
		<Header></Header>
		
		<div class="mapNav">
		    <div class="indexContainer">
		        <el-breadcrumb separator-class="el-icon-arrow-right">
		            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
		        </el-breadcrumb>
		    </div>
					
		</div>
		
		<!-- <div class="indexContainer mobileFontSize12"
			style="display: flex;align-items: center;font-size: 16px;color: #999;padding: 20px 0;">
			<span>首页</span>
			<span style="padding: 0 5px;">></span>
			<span>个人中心</span>
		</div> -->

		<div class="personWrapper">
			<div class="indexContainer">
				<div class="personinline">
					<div class="personContent">
						<div class="personLeft">
							<!-- <LeftMenu @getMenu="getMenu"></LeftMenu> -->
							<div style="display: flex;align-items: center;justify-content: center;padding: 20px 0;">
								<img style="width: 40px;height: 40px;" src="@/assets/images/cs8.png" />
								<div style="margin-left: 15px;font-size: 14px;">
									<div style="color: #333;font-weight: 600;">{{userInfo.userName}}</div>
									<div style="color: #999;">{{userInfo.dept}}</div>
								</div>
							</div>
							<div :class="[menuIndex==index?'active':'','nomal']" v-for="(item,index) in menuData" @click="handleMenu(index)">
								<div>{{item.name}}</div>
							</div>
						</div>
						<div class="personRight">
							<router-view></router-view>
						</div>
					</div>
				</div>

			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Link from "@/components/home/footer/link"
	// import Header from "@/components/personalCenter/header/header"
	import Footer from "@/components/home/footer/footer"
	import LeftMenu from "@/components/personalCenter/leftMenu/leftMenu"
	import {
		getUserMenu
	} from "@/request/api/link"
	export default {
		components: {
			Header,
			Footer,
			LeftMenu,
			Link
		},
		data() {
			return {
				menuData: [{
						name: '我的流程',
						childList: [{
							name: '产品审核',
							path: '/'
						}, {
							name: '需求审核',
							path: '/'
						}],
						path: '/'
					},
					{
						name: '我的订单',
						path: '/'
					},
					// {
					// 	name: '产品管理',
					// 	path: '/basicInfo'
					// }
				],
				menuIndex:0,
				mapName: '',
				
				userInfo:{}
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
			}
			//生命周期中调用获取数据的方法
			// this.getBreadcrumb();
			this.$nextTick(()=>{
				this.handleMenu(0)
			})
		},
		methods: {
			// 点击菜单
			handleMenu(index){
				this.menuIndex = index
				if (this.menuIndex==0) {
					this.$router.push("/myDemand");
				} else if (this.menuIndex==1){
					this.$router.push("/myOrder");
				}
			},
			// 给页面导航赋值
			getMenu(val) {
				// this.menuData.forEach(item=>{
				//     if(item.path===val){
				//         this.mapName=item.name
				//     }
				// })
			},
			isHome(route) {
				return route.name === "index";
			},
			getBreadcrumb() {
				let matched = this.$route.matched;
				//如果不是首页
				if (!this.isHome(matched[0])) {
					matched = [].concat(matched);
				}
				let a = matched.shift();
				this.breadList = matched
			},
		},
		watch: {
			$route() { //监听$route
				this.getBreadcrumb();
			},
		},
	}
</script>
<style lang="less" scoped>
	@import './personal.less';
</style>